import React,{useState, useEffect} from 'react';
import { Card,Row,Col,Spin} from 'antd';
import { useRequest } from 'umi';

import PreChart from './components/preChart'
import PreTab from './components/preTab'
import PreSreach from './components/preSreach'
import PreRatio from './components/preRatio'
import { getFakeCaptcha } from './service';
import styles from './index.less'
const IndexPage: React.FC = () => {
  const [size, setSize] = useState(Number);
  useEffect(() => {
    setSize(12);
  });
  const { loading, data } = useRequest(getFakeCaptcha);
    return (
      <div>
        <div>
          <Spin spinning={loading}>
          <PreChart {...data}/>
          <PreTab {...data}></PreTab>
          <Row gutter={20} className={styles.mT20}>
                <Col xl={16} lg={16} md={16} sm={24} xs={24}>
                    <PreSreach {...data}/>
                </Col>
                <Col xl={8} lg={8} md={8} sm={24} xs={24}>
                    <PreRatio {...data}/>
                </Col>
          </Row>
         </Spin>
        </div>
      </div>
    );
  };

  export default IndexPage;
